import { useState } from "react";
import ImageJPG1 from "@/assets/images/1.jpg";
import ImageJPG2 from "@/assets/images/2.jpg";
import ImageJPG3 from "@/assets/images/3.jpg";
import ImageJPG4 from "@/assets/images/4.jpg";
import ImageJPG5 from "@/assets/images/5.jpg";

interface Image {
  place: string;
  src: string;
}

const images: Image[] = [
  { place: "图片1", src: ImageJPG1 },
  { place: "图片2", src: ImageJPG2 },
  { place: "图片3", src: ImageJPG3 },
  { place: "图片4", src: ImageJPG4 },
  { place: "图片5", src: ImageJPG5 }
];

function Gallery() {
  const [index, setIndex] = useState(0);
  const hasNext = index < images.length - 1;

  function handleClick() {
    if (hasNext) {
      setIndex(index + 1);
    } else {
      setIndex(0);
    }
  }

  const image = images[index];

  return (
    <>
      <button onClick={handleClick}>下一张</button>
      <h3>
        {images.length}张图片中的第{index + 1}张
      </h3>
      <img key={image.src} src={image.src} alt={image.place} />
      <p>{image.place}</p>
    </>
  );
}

export default Gallery;
